<template>
  <div class="change-password-modal">
    <a-modal v-model:open="open" title="修改密码" :centered="true" :mask-closable="false" width="420px">
      <template #footer>
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="handleOk">确定</a-button>
      </template>
      <div class="form" style="padding-top: 10px">
        <a-form
          :model="formState"
          ref="formRef"
          name="basic"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 18 }"
          autocomplete="off"
        >
          <a-form-item label="原密码" name="password" :rules="[{ required: true, message: '请输入密码' }]">
            <a-input-password v-model:value="formState.password" placeholder="请输入密码" />
          </a-form-item>
          <a-form-item label="新密码" name="newPassword" :rules="[{ required: true, message: '请输入新密码' }]">
            <a-input-password v-model:value="formState.newPassword" placeholder="请输入新密码" />
          </a-form-item>
          <a-form-item label="确认密码" name="newPassword2" :rules="[{ required: true, message: '请输入确认密码' }]">
            <a-input-password v-model:value="formState.newPassword2" placeholder="请输入确认密码" />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, computed } from "vue";
interface FormState {
  password: string;
  newPassword: string;
  newPassword2: string;
}
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  }
});

const emit = defineEmits(["update:modelValue"]);

// 打开弹窗
const open = computed({
  get: () => {
    return props.modelValue;
  },
  set: val => {
    emit("update:modelValue", val);
  }
});

// loading
const loading = ref<boolean>(false);

// 表单数据
const formState = reactive<FormState>({
  password: "",
  newPassword: "",
  newPassword2: ""
});

// 确定
const handleOk = () => {
  loading.value = true;
  emit("update:modelValue", false);
};

// 取消
const handleCancel = () => {
  emit("update:modelValue", false);
};
</script>
